@import './variables.scss';
@import '../../containers/Application/colors.scss';

.blocks {
    position: relative;
}

.spacer {
    height: 10px;
}

.addButtonContainer {
    text-align: center;
}

.addButton {
    margin: 0 5px;
}

.addButtonDivider {
    /* replace margin of block above with container to display button if space between blocks is hovered */
    margin-top: -$blockMarginBottom;
    padding-top: $blockMarginBottom;
    margin-bottom: 0;
    height: 0;

    .addButton {
        transform: translateY(calc(-50% - $blockMarginBottom / 2));
        box-shadow: 2px 6px 12px 0 rgba($silver, .5);
        visibility: hidden;
    }

    /* display button in the middle of the container when container is hovered */
    &:hover {
        .addButton {
            visibility: unset;
            transition-property: visibility;
            transition-delay: .1s;
        }
    }
}

.blockCollectionActionButtonContainer {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.blockCollectionActionButton {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
}

.blockCollectionActionButtonIcon {
    display: inline-block;
    font-size: 14px;
    margin-right: 7px;
}

.blockCollectionActionButtonText {
    text-decoration: underline;
}
